<!-- @format -->

<script setup></script>
<template>
	<div class="dialog">
		<div class="dialog-header">
			<h3>友情提示</h3>
			<span class="close">✖️</span>
		</div>
		<div class="dialog-content">
			<!-- 在占位时，slot 之间包裹任何内容都叫插槽的默认值  -->
			<slot>我是默认内容</slot>
		</div>
		<div class="dialog-footer">
			<button>取消</button>
			<button>确认</button>
		</div>
	</div>
</template>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.dialog {
		width: 470px;
		height: 230px;
		padding: 0 25px;
		background-color: #ffffff;
		margin: 40px auto;
		border-radius: 5px;
	}
	.dialog-header {
		height: 70px;
		line-height: 70px;
		font-size: 20px;
		border-bottom: 1px solid #ccc;
		position: relative;
	}
	.dialog-header .close {
		position: absolute;
		right: 0px;
		top: 0px;
		cursor: pointer;
	}
	.dialog-content {
		height: 80px;
		font-size: 18px;
		padding: 15px 0;
	}
	.dialog-footer {
		display: flex;
		justify-content: flex-end;
	}
	.dialog-footer button {
		width: 65px;
		height: 35px;
		background-color: #ffffff;
		border: 1px solid #e1e3e9;
		cursor: pointer;
		outline: none;
		margin-left: 10px;
		border-radius: 3px;
	}
	.dialog-footer button:last-child {
		background-color: #007acc;
		color: #fff;
	}
</style>
